<template>
  <div class="container">
    <input type="text" v-model="newNote" @keyup.enter="addNote" placeholder="请输入记事内容">
    <ul>
      <li v-for="(note, index) in notes" :key="index">
        <span class="index">{{ index + 1 }}</span> 
        <span>{{ note }}</span>
        <button @click="deleteNote(index)">删除</button>
      </li>
    </ul>
    <p v-if="notes.length > 0" class="record">共有记录: {{ notes.length }} </p>
    <button @click="clearAllNotes" v-show="notes.length > 0" class="clear-button">清除所有记录</button>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

export default {
  setup() {
    const newNote = ref('');
    const notes = reactive([]);

    const addNote = () => {
      if (newNote.value.trim() !== '') {
        notes.push(newNote.value);
        newNote.value = '';
      }
    };

    const deleteNote = (index) => {
      notes.splice(index, 1);
    };

    const clearAllNotes = () => {
      notes.splice(0, notes.length);
    };

    // 在组件加载时添加默认的记事内容
    onMounted(() => {
      notes.push("响应式开发课", "实验室做实验", "高年级课题项目", "乒乓球比赛", "写作业");
    });

    return {
      newNote,
      notes,
      addNote,
      deleteNote,
      clearAllNotes
    };
  }
};
</script>

<style>
.container {
  margin: 20px;
  width: 300px;
}

ul {
  list-style-type: none;
  padding: 0;
}

.index {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
}

li {
  margin-bottom: 10px;
  position: relative; /* 添加相对定位 */
}

li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}

button {
  float: right;
  margin-right: auto;
  background-color:#ccc;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 4px;
}

.record {
  border-bottom: 2px solid black;
  padding-bottom: 10px;
  margin-top: 20px;
}

.clear-button {
    display: inline-block;  
    padding: 4px 10px;  
    font-size: 16px;  
    text-align: center;  
    text-decoration: none;  
    background-color: #ffffff;  
    border: 1px solid #000;  
    border-radius: 4px;  
    cursor: pointer;  
}
</style>